<template>
  <div id="basic">
    <!-- <div class="title">儿童膳食测评报告</div>
      <div id="createTime">报告日期：{{ report_time }}</div> -->
    <!-- <el-divider  border-style="dashed"  style="border-color:#2AB28B">
      <div class="subTitle">历史曲线图</div>
    </el-divider> -->

    <!-- 生长发育曲线图 -->
    <div style=" margin-top: 20px;display:flex">
      <div style="width: 60%;background-color:#2ab28b;height: 100px;text-align: center;line-height: 100px; ">
        <span style="font-size: 30px; font-weight: bold; color: #ffffff">儿童</span><span
          style="font-size: 30px; color: #666666; margin-left: 20px">生长发育曲线图</span>
      </div>
      <div style="height: 100px; width: 40%;background-color:#2ab28b;">
        <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt=""/> -->
      </div>
    </div>
    <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
      <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
      <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童基本信息</div>
    </div>
    <div
        style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px;font-size: 14px;"
        v-if="times == 2">
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            年龄
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ births }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;border-right: 2px solid #09a578;">
            {{ report_time }}
          </div>
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            BMI</div>
          <div style="width: 40%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ BMIs }}
          </div>
        </div>
      </div>
      <div style="width: 1070px; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px"
        v-if="times == 1">
        <div style="display: flex">
          <div
            style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            检测日期</div>
          <div style="width: 90%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
            {{ report_time }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            儿童姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人姓名
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            监护人手机号
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            身高
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.height ? contents.height + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.weight ? contents.weight + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            头围
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.touwei ? contents.touwei + 'CM' : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生身长
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengsg ? contents.chushengsg + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.chushengtz ? contents.chushengtz + 'KG' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            腹围
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.fuwei ? contents.fuwei + 'CM' : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            血型
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.xuexing_value ? contents.xuexing_value : '' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            民族
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.minzu_value ? contents.minzu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            与监护人关系
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.guanxi_value ? contents.guanxi_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            家长受教育程度
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
            {{ contents.jiaoyu_value ? contents.jiaoyu_value : '' }}
          </div>
          <div
            style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
            出生情况
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
            {{ contents.birthSituation_value ? contents.birthSituation_value : '' }}
          </div>
        </div>
      </div>

    <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
      <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
      <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童生长发育曲线图</div>
    </div>
    <div style="display:flex;border: 2px solid #09a578;margin-top:20px;justify-content: space-between;">
      <!-- <div id="myChart1" :style="{ width: '33%', height: '550px', }"></div> -->
      <div id="myChart2" :style="{ width: '50%', height: '550px', }"></div>
      <div id="myChart3" :style="{ width: '50%', height: '550px', }"></div>
    </div>
    <div style="border: 2px solid #09a578;margin-top:20px;font-size: 14px;">
      <!-- <div style="margin-top:5px;margin-left: 5px;">BMI值：{{BMI<18.5?'偏瘦':BMI<24 && BMI>=18.5?'正常':BMI<28 && BMI>=24?'偏胖':BMI>=28?'肥胖':''}}</div>
      <div style="margin-top:5px;margin-left: 5px;">建议：{{BMI<18.5?'可以选择富含蛋白质、脂肪和碳水化合物的食物，如瘦肉、鱼类、坚果、全谷物和奶制品。同时，多吃蔬菜和水果，以确保摄入足够的维生素和矿物质。':BMI<24 && BMI>=18.5?'您的BMI正常请保持。':BMI<28 && BMI>=24?'避免高热量、高脂肪食物，选择清淡、易消化的食物，如新鲜水果、蔬菜，同时搭配适量的肉类和主食、适当运动':BMI>=28?'控制总热量摄入，减少高热量、高脂肪和高糖分食物的摄入，如炸鸡、薯条、糖果等、增加蔬菜、水果和全谷物的摄入，提供足够的膳食纤维和营养素':''}}</div> -->
      <div style="margin-top:5px;margin-left: 5px;">身高：{{Height_s<contents.height?'偏高':'偏低'}}</div>
      <div style="margin-top:5px;margin-left: 5px;">建议：{{Height_s<contents.height?'身高偏高的人往往需要的能量也相对较高，但并不意味着可以无限制地摄入食物。建议定时定量进食，避免暴饮暴食，并根据个人的能量需求调整饮食量。':'保证充足的钙质摄入，如牛奶、酸奶、奶酪、小鱼干、豆腐、绿叶蔬菜等。增加蛋白质的摄入，建议适量增加瘦肉、鱼、禽类、豆类、蛋类等富含优质蛋白质的食物的摄入。'}}</div>
      <div style="margin-top:5px;margin-left: 5px;">体重：{{contents.weight>Weight_s?'偏重':'偏轻'}}</div>
      <div style="margin-top:5px;margin-left: 5px;margin-bottom: 5px;">建议：{{contents.weight>Weight_s?'减少高热量食物的摄入，特别是高糖、高脂肪和高盐的食物、多吃新鲜蔬菜和水果，提供足够的膳食纤维和维生素、适量运动。':'优先选择富含蛋白质、脂肪和碳水化合物的食物，如瘦肉、鱼类、禽类、全脂奶制品、坚果和种子等'}}</div>
    </div>
    <!-- <div style="border: 2px solid #09a578;margin-top:20px">
        1
    </div> -->
  
    <!-- <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px;display: flex;">
      <div><img src="../.././assets/img/12.jpg" style="height: 40px" alt="" /></div>
      <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童生长发育报告解析</div>
    </div>
    <div style="width: 1053px;padding:10px 10px;border: 1px solid #09a578;margin-top: 10px;padding-bottom: 90px;">
      <div style="  font-weight: 900;font-size: 18px;text-align: center;color: #606266;">您的BMI值为</div>
      <div style="display:flex;text-align: center;width: 25%;margin:auto;justify-content: space-between;margin-top: 10px;">
        <div style=" font-size: 48px;text-align: center; font-weight: 900;">{{ BMIs }}</div>
         <div style="font-size: 48px;text-align: center;color: #E2CB50; font-weight: 900;">{{ BMIs<18.5?'偏瘦': BMIs >= 18.5 && BMIs< 24 ? '正常': BMIs >= 24 && BMIs < 28 ? '偏胖':'肥胖'}}</div>
      </div>
      <div style="margin-top: 10px;"> 
        <div class="fen">
        <div class="fens">
          <img src="../assets/img/Evaluation_Result_biao.svg" alt="" :style="{'margin-left':'93%','margin-top':'-100%'}">
        </div>
        <div class="fenss">
          <div class="one"></div>
          <div class="one">18.5</div>
          <div class="one">24.0</div>
          <div class="one">28.0</div>
        </div>
        <div class="fensss">
          <div class="one"><div class="lei" :style="{'background':'#5394D0'}">偏瘦</div></div>
          <div class="one"><div class="lei" :style="{'background':'#67C23A'}">正常</div></div>
          <div class="one"><div class="lei" :style="{'background':'#E2CB50'}">偏胖</div></div>
          <div class="one"><div class="lei" :style="{'background':'#E27350'}">肥胖</div></div>
        </div>
      </div>
      </div>
    </div>
  </div>
  
  <div style="width: 1053px;border: 1px solid #09a578;padding: 10px 10px;margin:auto;margin-top: 10px;page-break-before: always;">
      <div>BMI是指身体质量指数，它是结合了身高和体重2个因素来判断人体胖瘦程度以及是否健康的一个标准。</div>
      <div>BMI在18.5-24之间是正常的BMI低于18.5考虑为体重过轻;24-27之间为超重;超过27以上为肥胖。</div>
      <div> BMI过低，体重通常较轻，对于此类人群体内的钙和维生素D较难被机体吸收。在此种情况下，骨骼发育不健全，身体的骨骼会变得脆弱儿童BMI数值过高可能会造成糖尿病、高血压、性早熟等并发症，所以在发现异常的时候需要及时的到医院进行相关的检查，积极处理和治疗。如改变不良的生活习惯，调整饮食，适当增加运动等。</div>-->
  </div> 
  <div style="width: 100%;justify-content: space-between;display: flex;">
      <div style="width: 50%;">
        <div style="width: 100%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              主治医师
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor}}</div>
        </div>
        <div style="width: 100%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
            <div
              style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
              检测护士
            </div>
            <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{Doctor1}}</div>
        </div>
        <div style="width: 100%;height: 40px;border: 2px solid #09a578;margin-top: 20px;margin-bottom: 20px;display: flex;">
          <div
            style=" width: 42%;line-height: 40px;background-color: rgb(42, 178, 139);color:#fff;height: 100%;text-align: center;border-right: 2px solid #09a578;">
            报告日期
          </div>
          <div style="width: 58%;height: 100%;line-height: 40px;text-align: center;">{{report_time}}</div>
      </div>
    </div>
    <div>
        <div v-if="code_1 == 'true'"
      style="margin-top: 10px;height:200px;text-align: end;margin-right: 50px;margin-bottom:50px;">
      <img style="width: 200px;height:200px;" :src="'http://' + baseUrl + '/' + codeimg" alt="">
      <div style="margin-top:10px;font-size: 20px;font-weight: bold;">
        扫码关注公众号,获取在线报告
      </div>
    </div>
    </div>
  </div>
 
      
 
</template>

<script setup>
import { defineComponent, onMounted, ref, watch } from 'vue';
import * as echarts from 'echarts'
import http, { baseUrl } from "../../utils/http";
import { useRoute, useRouter } from "vue-router"
const router = useRouter()
const route = useRoute()
const hospital_name = ref()
const report_time = ref()
const reportId = ref()
const times=ref()
const contents = ref({})
const BMI = ref()
const id = ref()
const codeimg = ref()
const Height_s = ref()
const Weight_s = ref()
const code_1 = ref(false)
const Doctor=ref()
const Doctor1=ref()
const birth = ref()
const username = ref()
const guardian = ref()
const birthStatus = ref()
const births =ref()
const BMIs=ref()
onMounted(() => { // 需要获取到element,所以是onMounted的Hook
  reportId.value = route.params.reportId
  username.value = route.params.username
  guardian.value = route.params.guardian
  id.value = route.params.id
  birthStatus.value = route.params.birth
  codeimg.value = window.localStorage.getItem('ercode')
  //获取二维码是否显示
  http.get('api/index/getAuth').then((res) => {
    let aray = res.data.data;
    let array = aray.split(',');
    if (array.includes('12')) {
      code_1.value = 'true'
    } else {
      code_1.value = 'false'
    }
  })

  //获取用户年龄
  http.get("api/archives/evaluating?id=" + id.value ).then((res) => {
      births.value=res.data.data.birth;
  });

  http.get('api/archives/viewReportMember?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
    if(res.data.data.times){
      let  parsedDate = new Date(res.data.data.times);
      let  targetDateObj = new Date('2024-01-08');
      if (parsedDate < targetDateObj) {
       times.value=1;
      } else if (parsedDate > targetDateObj) {
        times.value=2;
      } 
    }
    
    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
    }
    Doctor.value=res.data.data.contents.doctor;
    Doctor1.value=res.data.data.contents.doctor1;
    report_time.value = res.data.data.times
    contents.value = res.data.data.contents;
    birth.value = res.data.data.contents.birth;
    BMI.value = res.data.data.bmi;
    BMIs.value=res.data.data.bmi;
  })

  http.get('api/archives/viewreport?id=' + reportId.value + '&username=' + username.value + '&guardian=' + guardian.value + '&birth=' + birthStatus.value).then((res) => {
    hospital_name.value = res.data.data.hospital_name

    let color = ["#3EA4AA"];
    let color1 = ["#D0443B", "#3EA4AA"];
    let color2 = ["#D0443B", "#3EA4AA"];
    let xAxisData = ["偏瘦", "正常", "偏胖", "肥胖",];
    var arr = [];//标准平均身高
    var arrss1=[];//标准偏低身高
    var arrss2=[];//标准偏高身高
    var arr2 = [];
    var parr = res.data.data.primaryHeight;
    var parr1=res.data.data.primaryHeightMin;
    var parr2=res.data.data.primaryHeightMax;

    if (res.data.data.primaryHeight) {
      for (let i = 0; i < parr.length; i++) {
        arr.push(parr[i].content);
        arrss1.push(parr1[i].content);
        arrss2.push(parr2[i].content)
        arr2.push(parr[i].month);
      }
    }

    //获取用户生日 用户出生到现在的月份
    const startDate = new Date(res.data.data.contents.birth);
    const endDate = new Date();
    let monthsDifference = (endDate.getMonth() + 1) - startDate.getMonth();
    if (endDate.getFullYear() > startDate.getFullYear()) {
      monthsDifference += 12 * (endDate.getFullYear() - startDate.getFullYear());
    }
    //获取月份对应的下标以及身高
    let months = monthsDifference;
    let result = arr2.indexOf(months);
    if (result !== -1) {
      Height_s.value = arr[result];
    } else {
      let results = arr2.findIndex(num => num > months);
      let ress = arr[results - 1];
      let ress1 = arr[results];
      Height_s.value = ((arr[results]) / 2) + ((arr[results - 1]) / 2);

    }


    var arr1 = [];
    var arrsss1=[];
    var arrsss2=[];
    var arr3 = [];
    var arr4 = [];
    var indexes = '';
    var parrss1 = res.data.data.primaryWeight;
    var parrss2 = res.data.data.primaryWeightMin;
    var parrss3 = res.data.data.primaryWeightMax;
    if (res.data.data.primaryWeight) {
      for (let i = 0; i < parrss1.length; i++) {
        arr1.push(parrss1[i].content);
        arr3.push(parrss1[i].month);
      }
      
    }
    if(res.data.data.primaryWeightMin){
      for (let i = 0; i < parrss2.length; i++) {
        arrsss1.push(parrss2[i].content);
      }
    }
    if(res.data.data.primaryWeightMax){
      for (let i = 0; i < parrss3.length; i++) {
        arrsss2.push(parrss3[i].content);
      }
    }
    arr4 = arr3.filter((item, index) => {
      return parseInt(item) > parseInt(res.data.data.sumbirths)
    })
    for (let i = 0; i < arr3.length; i++) {
      if (arr3[i] == arr4[0]) {
        indexes = i
      }
    }
    let result1 = arr3.indexOf(months);
    if (result1 !== -1) {
      Weight_s.value = arr1[result1];
    } else {
      let results1 = arr2.findIndex(num => num > months);
      Weight_s.value = Math.round(((arr1[results1]) / 2) + ((arr1[results1 - 1]) / 2));

    }

    var bmi1 = '';
    var bmi2 = '';
    id.value = route.params.id
    http.get('api/archives/getbmi?id=' + id.value).then((res) => {
      window.localStorage.setItem("reportId", res.data.data.reportId);
      bmi1 = res.data.data.bmi;
      if (bmi1 < 18.5) {
        bmi2 = '偏瘦'
      } else if (bmi1 < 24 && bmi1 >= 18.5) {
        bmi2 = '正常'
      } else if (bmi1 < 28 && bmi1 >= 24) {
        bmi2 = '偏胖'
      } else if (bmi1 >= 28) {
        bmi2 = '肥胖'
      }
      var myChart = echarts.init(document.getElementById("myChart1"));
      myChart.value = myChart;
      myChart.setOption({
        backgroundColor: "#fff",
        color: color2,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: "axis",
          formatter: function () {
            return "";
          }
        },
        grid: {
          top: 100,
          containLabel: true
        },
        xAxis: [
          {
            name: "",
            type: "category",
            boundaryGap: false,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40,
              padding: [0, 0, 0, -15]
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "BMI值",
            axisLabel: {
              textStyle: {
                color: "#606266"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#E4E7ED"
              }
            },
            axisTick: {
              show: false // 刻度出来的尖尖
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#E4E7ED"],
                width: 1,
                type: "solid"
              }
            },
            axisPointer: {
              lineStyle: {
                color: "#DCDFE6" //坐标轴指示线
              },
              show: true //不坐标轴指示线
            },
            nameTextStyle: {
              color: "#606266",
              fontSize: 12,
              lineHeight: 40
            }
          }
        ],
        series: [
          {
            // name: "2018",
            name: "国际",
            type: "line",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[0]
              }
            },
            symbol: "circle", //数据交叉点样式
            // itemStyle: {
            //     normal: {
            //         color: "white",
            //         borderColor: '#D0443B',
            //         borderWidth: 1,
            //     }
            // },
            data: [0, 18.5, 24.0, 28.0]
          },
          {
            name: "我的",
            type: "scatter",
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color2[1]
              }
            },
            symbol: "circle", //数据交叉点样式 (实心点)
            // itemStyle: {
            //     normal: {
            //         color: "#ffffff",
            //         borderColor: '#3EA4AA',
            //         borderWidth: 1,
            //     }
            // },
            data: [[`${bmi2}`, `${bmi1}`]]
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    })
    var myChart1 = echarts.init(document.getElementById("myChart2"));
    myChart1.value = myChart1;
    myChart1.setOption({
      backgroundColor: "#fff",
      color: color2,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "月份",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: arr3
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "身高",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
      {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arrss1
        },
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arr
        },
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arrss2
        },
        {
          name: "我的",
          type: "scatter",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: [[arr3[indexes - 1], res.data.data.sumHeight]]
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart1.resize();
    });

    var myChart2 = echarts.init(document.getElementById("myChart3"));
    myChart2.value = myChart2;
    myChart2.setOption({
      backgroundColor: "#fff",
      color: color2,
      legend: {
        top: 20
      },
      tooltip: {
        trigger: "axis",
        formatter: function () {
          return "";
        }
      },
      grid: {
        top: 100,
        containLabel: true
      },
      xAxis: [
        {
          name: "月份",
          type: "category",
          boundaryGap: false,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40,
            padding: [0, 0, 0, -15]
          },
          data: arr3
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "体重",
          axisLabel: {
            textStyle: {
              color: "#606266"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#E4E7ED"
            }
          },
          axisTick: {
            show: false // 刻度出来的尖尖
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#E4E7ED"],
              width: 1,
              type: "solid"
            }
          },
          axisPointer: {
            lineStyle: {
              color: "#DCDFE6" //坐标轴指示线
            },
            show: true //不坐标轴指示线
          },
          nameTextStyle: {
            color: "#606266",
            fontSize: 12,
            lineHeight: 40
          }
        }
      ],
      series: [
      {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arrsss1
        },
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arr1
        },
        {
          // name: "2018",
          name: "国际",
          type: "line",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[0]
            }
          },
          symbol: "circle", //数据交叉点样式
          // itemStyle: {
          //     normal: {
          //         color: "white",
          //         borderColor: '#D0443B',
          //         borderWidth: 1,
          //     }
          // },
          data: arrsss2
        },
        {
          name: "我的",
          type: "scatter",
          smooth: true,
          symbolSize: 8,
          zlevel: 3,
          lineStyle: {
            normal: {
              color: color2[1]
            }
          },
          symbol: "circle", //数据交叉点样式 (实心点)
          // itemStyle: {
          //     normal: {
          //         color: "#ffffff",
          //         borderColor: '#3EA4AA',
          //         borderWidth: 1,
          //     }
          // },
          data: [[arr3[indexes - 1], res.data.data.sumWeight]]
        }
      ]
    });
    window.addEventListener("resize", function () {
      myChart2.resize();
    });
  })

  setTimeout(() => {
    print('print-all')
  }, 4000)
});
</script>

<style scoped>
#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
}

#basic {
  font-size: 14px;
  width: 1075px;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break: break-all;
  margin: 60px auto 0 auto;
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}

#basic #createTime {
  font-size: 16px;
  color: #999999;
  float: right;
}

.fen {
  width: 100%;
  height: 30px;
  padding: 0 270px;
  box-sizing: border-box;
  margin-top: 20px;
}

.fen  .fens {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #5394D0 12.5%, #67C23A 37.5%, #E2CB50 62.5%, #E27350 87.5%);
  border-radius: 25px;
  position: relative;
}
.fen  .fens .img{
  margin-top: -100%;
}
.fen .fenss {
  width: 100%;
  height: 100%;
  position: relative;
  top: -30px;
  padding: 2px 0;
  box-sizing: border-box;
  display: flex;
  line-height: 26px;
}

.fen .fenss .one{
  flex: 1;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  padding-left: 6px;
  box-sizing: border-box;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
}

.fen .fenss .one:last-child {
  border: none;
}

.fen .fensss {
  width: 100%;
  height: 37px;
  position: relative;
  top: -20px;
  display: flex;
}

.fen .fensss .one {
  flex: 1;
}

.fen .fensss .one .lei {
  width: 68px;
  height: 37px;
  margin: 0 auto;
  text-align: center;
  line-height: 37px;
  border-radius: 40px;
  font-size: 18px;
  color: #ffffff;
}
</style>
